import { ProFormText, ProFormSelect, EditableProTable, ProFormDigit, ProFormSwitch } from "@ant-design/pro-components";
import { Card, Form, Row, Col, Tabs, Switch, FormInstance } from "antd";
import styles from '../style.less'
import React, { useState } from "react";
import Parameter from "./Parameter";
import EmptyCard from "./EmptyCard";
import BaseURL from "@/components/BaseURL";
import RequestForm from "@/components/RequestForm";

interface SIMPLEProps {
    [key: string]: any;
    form: FormInstance
}

const SIMPLE: React.FC<SIMPLEProps> = ({
    form
}) => {

    const [currentEdit, setCurrentEdit] = useState('header')

    return <>
        <Card
            title="线程组配置"
            className={styles.card}
            bordered={false}
        >
            <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                    <ProFormText
                        label={'线程组名称'}
                        name={['threadGroupConfig', "threadGroupName"]}
                        rules={[
                            {
                                required: true,
                                message: '请输入线程组名称',
                            },
                        ]}
                        placeholder="请输入线程组名称"
                    />
                </Col>
                <Col lg={6} md={12} sm={24}>
                    <ProFormDigit
                        label={'线程并发数量'}
                        name={['threadGroupConfig', "numThreads"]}
                        min={1}
                        fieldProps={{ precision: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入线程并发数量',
                            },
                        ]}
                        placeholder="请输入线程并发数量"
                    />
                </Col>
                <Col lg={6} md={12} sm={24}>
                    <ProFormDigit
                        name={['threadGroupConfig', "rampUp"]}
                        label={'线程组启动时间'}
                        min={1}
                        fieldProps={{
                            addonAfter: '秒',
                            precision: 0
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请输入线程组启动时间',
                            },
                        ]}
                        placeholder="请输入线程组启动时间"
                    />
                </Col>
                <Col lg={6} md={12} sm={24}>
                    <ProFormDigit
                        name={['threadGroupConfig', "loopCount"]}
                        label={'循环次数'}
                        tooltip='如果-1则是永久循环'
                        min={-1}
                        fieldProps={{
                            precision: 0
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请输入循环次数',
                            },
                        ]}
                        placeholder="请输入循环次数"
                    />
                </Col>

                <Col lg={6} md={12} sm={24}>
                    <ProFormDigit
                        label={'持续时间'}
                        name={['threadGroupConfig', "duration"]}
                        min={0}
                        fieldProps={{
                            addonAfter: '秒',
                            precision: 0
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请输入持续时间',
                            },
                        ]}
                        placeholder="请输入持续时间"
                    />
                </Col>
                <Col lg={6} md={12} sm={24}>
                    <ProFormDigit
                        label={'启动延迟时间'}
                        name={['threadGroupConfig', "delay"]}
                        min={0}
                        fieldProps={{
                            addonAfter: '秒',
                            precision: 0
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请输入启动延迟时间',
                            },
                        ]}
                        placeholder="请输入启动延迟时间"
                    />
                </Col>
                <Col lg={6} md={12} sm={24}>
                    <ProFormSwitch
                        name={['threadGroupConfig', "schedulerEnabled"]}
                        label={'是否开启调度器'}
                        fieldProps={{
                            checkedChildren: '开启',
                            unCheckedChildren: '关闭'
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请选择是否开启调度器',
                            },
                        ]}
                        placeholder="请选择是否开启调度器"
                    />
                </Col>
            </Row>
        </Card>


        <Card
            title="采样器配置"
            className={styles.card}
            bordered={false}
        >
            <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                    <ProFormText
                        label={'请求路径'}
                        name="path"
                        fieldProps={{
                            addonBefore: <BaseURL id={form.getFieldValue('environmentId')} />
                        }}
                        rules={[
                            {
                                required: true,
                                message: '请输入线程组名称',
                            },
                        ]}
                        placeholder="请输入线程组名称"
                    />
                </Col>
                <Col lg={6} md={12} sm={24}>
                    <ProFormSelect
                        label={'请求方式'}
                        name="method"
                        rules={[
                            {
                                required: true,
                                message: '请选择请求方式',
                            },
                        ]}
                        options={[
                            {
                                label: 'GET',
                                value: 'GET'
                            },
                            {
                                label: 'POST',
                                value: 'POST'
                            },
                            {
                                label: 'PUT',
                                value: 'PUT'
                            },
                            {
                                label: 'DELETE',
                                value: 'DELETE'
                            },
                            {
                                label: 'HEAD',
                                value: 'HEAD'
                            },
                            {
                                label: 'OPTIONS',
                                value: 'OPTIONS'
                            },
                        ]}
                        placeholder="请选择请求方式"
                    />
                </Col>
            </Row>
            <Tabs
                type='line'
                items={[
                    { label: '请求头', key: 'header' },
                    { label: '请求体', key: 'body' },
                    { label: '查询参数', key: 'query' },
                ]}
                activeKey={currentEdit}
                onChange={val => {
                    setCurrentEdit(val)
                }}
            ></Tabs>
            <RequestForm form={form} currentEdit={currentEdit} />
        </Card>
        <Card
            title="断言配置"
            extra={<Form.Item noStyle name={'enableAssertionConfig'}>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>}
            className={styles.card}
            bordered={false}
        >
            <Form.Item noStyle shouldUpdate={(pre, next) => pre.enableAssertionConfig !== next.enableAssertionConfig}>
                {({ getFieldValue }) => {
                    if (getFieldValue('enableAssertionConfig')) {
                        return <EditableProTable<any>
                            rowKey="key"
                            maxLength={5}
                            name={'assertion'}
                            recordCreatorProps={{
                                position: 'bottom',
                                record: () => ({ key: (Math.random() * 1000000).toFixed(0) }),
                            }}
                            toolBarRender={false}
                            loading={false}
                            columns={[
                                {
                                    title: '断言来源',
                                    dataIndex: 'from',
                                    valueType: 'select',
                                    valueEnum: {
                                        RESPONSE_CODE: { text: '响应码' },
                                        RESPONSE_HEADER: { text: '响应头' },
                                        RESPONSE_DATA: { text: '响应体' },
                                    }
                                },
                                {
                                    title: '断言类型',
                                    dataIndex: 'type',
                                    valueType: 'select',
                                    valueEnum: {
                                        REGEXP: { text: '正则' },
                                        JSONPATH: { text: 'JSONPATH规则' },
                                    }
                                },
                                {
                                    title: '断言动作',
                                    dataIndex: 'action',
                                    valueType: 'select',
                                    valueEnum: {
                                        CONTAIN: { text: '包含' },
                                        NOT_CONTAIN: { text: '不包含' },
                                        EQUAL: { text: '等于' },
                                        NOT_EQUAL: { text: '不等于' },
                                        GREAT_THEN: { text: '大于' },
                                        LESS_THEN: { text: '小于' },
                                        GREAT_THEN_OR_EQUAL: { text: '大于等于' },
                                        LESS_THEN_OR_EQUAL: { text: '小于等于' },
                                    }
                                },
                                {
                                    title: '关联表达式',
                                    dataIndex: 'express',
                                },
                                {
                                    title: '预期值',
                                    dataIndex: 'value',
                                },
                                {
                                    title: '操作',
                                    valueType: 'option',
                                    render: (text, record, _, action) => [
                                        <a
                                            key="editable"
                                            onClick={() => {
                                                action?.startEditable?.(record.key);
                                            }}
                                        >
                                            编辑
                                        </a>,
                                        <a
                                            key="delete"
                                            onClick={() => {
                                                const tableDataSource = form?.getFieldValue(
                                                    'assertion',
                                                ) as any[];

                                                form?.setFieldsValue({
                                                    assertion: tableDataSource?.filter((item) => item.key !== record.key),
                                                });
                                            }}
                                        >
                                            删除
                                        </a>,
                                    ],
                                },

                            ]}
                            editable={{
                                type: 'multiple',
                            }}
                        />
                    }
                    return <EmptyCard text="该用例未启用断言配置。Tips: 右上角可以启用" />
                }}
            </Form.Item>

        </Card>
        <Card
            title="参数化配置"
            extra={<Form.Item noStyle name={'enableParamConfig'}>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>}
            className={styles.card}
            bordered={false}
        >
            <Form.Item noStyle shouldUpdate={(pre, next) => pre.enableParamConfig != next.enableParamConfig}>
                {({ getFieldValue }) => {
                    if (getFieldValue('enableParamConfig')) {
                        return <Parameter form={form} name='relation' />
                    }
                    return <EmptyCard text="该用例未启用参数化配置。Tips: 右上角可以启用" />
                }}
            </Form.Item>

        </Card>
    </>
}

export default SIMPLE
